<template>
  <van-popup v-model:show="show" class="p-4" round>
    <div class="text-center font-bold mb-2">基本设置</div>
    <div class="">
      <div class="mb-4">
        <label for="password">联系方式：</label>
        <input v-model="contact" type="text" class="border rounded p-1" />
      </div>

      <div class="mb-4 flex justify-between">
        <label for="password">开启/关闭提示音：</label>
        <van-switch v-model="checked" @change="changeSwitch" />
      </div>
    </div>
    <div class="m-2 flex justify-between">
      <button @click="show = false" class="border border-white rounded text-black bg-gray-100 px-4 py-1">
        返回
      </button>
      <button @click="submit" class="border border-white rounded text-white bg-blue-500 px-4 py-1">
        保存
      </button>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { computed, defineEmits, ref, onMounted } from 'vue'
import { GetSafeApi, SetPrompt, EditContactApi } from '@/apis/user'
import { showToast } from 'vant'
import { useUserStore } from '@/stores/user';

const emit = defineEmits(['update:show-modal'])
const contact = ref('')
const checked = ref(false)

const { getUserInfo, setUserInfo } = useUserStore()

const props = defineProps({
  showModal: {
    type: Boolean,
    default: false
  }
})

const show = computed({
  get() {
    return props.showModal || false
  },
  set(val) {
    emit('update:show-modal', val)
  }
})

onMounted(() => {
  GetSafeApi().then((res) => {
    checked.value = res.prompt == '1'
  }),
    contact.value = getUserInfo.contact
})

function submit() {
  EditContactApi(
    contact.value
  ).then(() => {
    show.value = false
    setUserInfo({ contact: contact.value, ...getUserInfo })
    showToast('修改成功')
  })
}

function changeSwitch() {
  SetPrompt({
    prompt: checked.value ? '1' : '0'
  }).then(() => {
    showToast({
      message: '修改成功',
      duration: 1000
    })
  })
}
</script>
